<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>藏边旅游网_弹出层的研究</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/jquery.popup.js"></script>
<link href="../style/popup.css" rel="stylesheet" type="text/css" />
<style>
	html{
		margin-top:0px;
	}
	*{margin:0;padding:0;}
	body{
		font-family:"Verdana","宋体";
		font-size:12px;
		background-color:#eee;
		padding-top:0px;
		
		margin:10px;
		margin-left:10px;
	}
	.wrap{
		width:1500px;
		height:	260px;
		background-color:#f5f5f5;
		border:1px #dcac9a solid;
		padding-left:50px;
		margin-left:50px;
		position:relative;
		margin-top:10px;
	}
	.client{
		width:1000px;
		height:200px;
		background-color:#f5f5f5;
		border:1px #dcac9a solid;
		padding-left:50px;
		margin-left:50px;
		position:relative;
		margin-top:10px;
		display:none;
	}
	.box{
		width:200px;
		height:200px;
		background-color:#e0ffff;
		border: 10px #46dca2 solid;
		padding-left:10px;
		overflow:auto;
		margin-left:10px;
		position:relative;
		
	}
</style>
<script type="text/javascript" >	
	$(function(){		
		$("#measure").click(function(){
			$.popopLayer({
				locker:{
					scope:'document',
					color:'#f5f5f5',
					opacity:'0.1'
				},
				popup:{
					width:400,
					height:247,					
					bindCss:'no',
					wrapIframe:'no',
					options:{
						dragable:'yes',
						modal:'no',
						style:'default',
						resizable:'no',
						sourceType:'ajax',//程序指定，页面的某个元素内容，代码片段url,ajax [diy,url,ajax]
						sourceValue:'/login4pop'
					}
				}					
			});
		});
		
	});
</script>
</head>
<body>
	<div class="wrap">
		<div class="box">
			<p style="border:1px #dcad87 solid">
				ABCDEFGHIJKLMNOPQRSTABCDEFGHIJKLMNOPQRSU
				ABCDEFGHIJKLMNOPQRYZABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSDABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSTABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSUABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSTABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRYZABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSDABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSTABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSUABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSUABCDEFGHIJKLMNOPQRYZ
			</p>
		</div>
	</div>
	<div class="client">
		<div>
			<label>外围wrap</label>
			<div>
				width:
				<select>
					<option></option>	
				</select>
			</div>
		</div>
	</div>
	<div id="measurewrap" style="float:left;margin-left:50px;margin-top:5px;background-color:#666;">
		<input id="measure" type="button" value="Click Me" style="height: 32px; width: 99px;"/>
		<span id="measureC" style="background-color:#222;display:none">SPAN CLICK ME</span>
	</div>
	<div style="float:left;margin-left:50px;margin-top:5px"><p id="logger"></p></div>
	
	<div style="height:	1000px;display:block;margin-bottom:10px;"></div>
	<div style="display:block;margin-bottom:10px;">111</div>
	
<script type="text/javascript" >
	var logger = new function(){
		this.log = function(obj,isNewLine){
			var oldS = $("#logger").html();
			var s;
			if(typeof isNewLine !='undefined' && isNewLine==true){
				s = oldS + "</br>" + "<span style='color:blue'>" + obj['key'] + ":" + "</span>"+obj['value'];
			}else{
				s = oldS + " " + "<span style='color:blue'>" + obj['key'] + ":" +"</span>" + obj['value'];
			}
			$("#logger").html(s);
		};
		this.clear = function(){
			$("#logger").html("");
		}
		this.hr = function(){
			var hr = "<div style='border-bottom:1px blue solid;margin-top:1px;'></div>"
			var oldS = $("#logger").html();
			var s = oldS + hr;
			$("#logger").html(s);
		}
		
	}();
</script>
</body>
</html>